<template>
  <div>
    <!-- 头部 -->
    <div class="top">
      <van-icon name="qr" />
      <p>全球热销品牌</p>
    </div>

    <div class="center">
      <!-- 图片部分 -->
      <van-grid :border="false" :column-num="4" :icon-size="35 + 'px'">
        <!-- 第一排 -->
        <van-grid-item>
          <van-image
            src="https://mp5.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1593481826.jpeg?imageView2/2/w/160/q/90"
          />
        </van-grid-item>
        <van-grid-item>
          <van-image
            src="http://mp6.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1612335322.jpeg?imageView2/2/w/160/q/90"
          />
        </van-grid-item>
        <van-grid-item>
          <van-image
            src="https://mp6.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1595239672.jpeg?imageView2/2/w/160/q/90"
          />
        </van-grid-item>
        <van-grid-item>
          <van-image
            src=" https://mp5.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1498543566.jpeg?imageView2/2/w/160/q/90"
          />
        </van-grid-item>

        <!-- 第二排 -->
        <van-grid-item>
          <van-image
            src="https://mp6.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1563960647.jpeg?imageView2/2/w/160/q/90"
          />
        </van-grid-item>
        <van-grid-item>
          <van-image
            src="https://mp5.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1612335336.jpeg?imageView2/2/w/160/q/90"
          />
        </van-grid-item>
        <van-grid-item>
          <van-image
            src="https://mp5.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1595310899.jpeg?imageView2/2/w/160/q/90"
          />
        </van-grid-item>
        <van-grid-item>
          <van-image
            src=" https://mp6.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1620784189.jpeg?imageView2/2/w/160/q/90"
          />
        </van-grid-item>
      </van-grid>
    </div>

    <!--  主体部分 -->
    <section>
      <div class="top">
        <van-icon name="qr" />
        <p>疯抢专场 早10点上新</p>
      </div>

      <ul class="tuan-list">
        <!-- 1 -->
        <li v-for="(item,index) in mbabyList" :key="index">
          <div class="list-img">
            <span>{{item.discount_string}}</span>
            <img
              :src="item.image_url_set.main[480]"
            />
          </div>
          <div class="list-d2">
            <p class="list-p1">{{item.title}}</p>
            <div class="list-p2" >
               <span>仅剩</span>
              <van-count-down class="span" :time="setVal(item.end_time)" format="DD天HH时mm分 " />
              <span></span>
              <!-- <span>{{setVal(item.end_time)}}</span> -->
              
            </div>
          </div>
          <div class="list-d3">
            <img :src="item.image_url_set.brand[480]" />
          </div>
        </li>   

        
        
      </ul>
    </section>

    <!-- 底部 -->
    <footer>
      <div class="footerone">
        <img
          src="http://s1.jmstatic.com/templates/touch/css/v3/image/footer_bg.jpg"
        />
      </div>

      <ul class="footertwo">
        <li class="lione">触屏版</li>
        <li class="litwo">电脑版</li>
      </ul>

      <p class="pp">©2016 聚美优品 Jumei.com</p>
    </footer>
  </div>
</template>
 
<script>
import axios from 'axios'

export default {
  data() {
    return {
      mbabyList:[],
      
    }
  },
  async mounted() {
    let result =  await axios.get('/muandbaby/ajaxList?page=1&card_id=7430')
    console.log(result);
    this.mbabyList = result.data.item_list
  },
  methods:{

   setVal(val){
     var template = Date.parse(new Date())
     val = val * 1000
     var time = val - template;
     return time
   }
    

  }

};

</script>


<style scoped>
.top {
  width: 375px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top > p {
  font-size: 14px;
  color: #333;
  font-weight: 400;
}
.top > van-icon {
  color: pink;
}

/* 图片部分 */
.center {
  width: 375px;
  height: 227px;
}

/* 主体部分 */
section {
  width: 375px;
}

section > .tuan-list {
  width: 375px;
}

section > .tuan-list > li > .list-img > img {
  width: 375px;
  height: 187.5px;
}
section > .tuan-list > li > .list-img{
  position: relative;
}
section > .tuan-list > li > .list-img > span {
  position: absolute; 
  background-color: #000;
  font-size: 11px;
  text-align: center;
  color: #fff;
  width:auto;
  height: 20px;
  line-height: 20px;
  bottom:20px;
}
section > .tuan-list > li > .list-d2 {
  /* width: 129px; */
  /* height: 66px; */
  float: left;
  margin-bottom: 10px;
  padding-top: 15px;
}
/* 时间戳   */
.van-count-down{
  font-size: 10px;
  color: #999;
  display: inline;
}

section > .tuan-list > li > .list-d2 > .list-p1 {
  /* width: 99px; */
  display: inline;
  height: 20px;
  color: #333;
  font-size: 14px;
  margin-left: 20px;
  
}
section > .tuan-list > li > .list-d2 > .list-p2 {
  color: #999;
  font-size: 12px;
  margin-left: 20px;
  
}

section > .tuan-list > li > .list-d3 {
  float: right;
  width: 72px;
  height: 36px;
  margin-right: 16px;
  margin-top: 10px;

}
section > .tuan-list > li > .list-d3 > img {
  width: 100%;
  height: 100%;
}

/* 底部 */
footer {
  width: 375px;
  height: 243px;
  /* background-color: red; */
  overflow: hidden;
}

footer > .footerone {
  width: 351px;
  height: 70px;
  margin-top: 16px;
}
footer > .footerone > img {
  width: 100%;
  height: 100%;
}

footer > .footertwo > li {
  margin: 0 20px;
  margin-top: 20px;
  border: 1px solid gray;
  border-radius: 20px;
  text-align: center;
  line-height: 30px;
}
footer > .footertwo > .lione {
  float: left;
  margin-left: 80px;
  width: 80px;
  height: 30px;
}
footer > .footertwo > .litwo {
  margin-right: 80px;
  float: right;
  width: 80px;
  height: 30px;
}
footer > .footertwo > li:hover {
  color: pink;
}

footer > .pp {
  width: 351px;
  height: 20px;
  margin-top: 20px;
  padding-left: 80px;
  float: left;
  color: #ccc;
}
</style>

